<template>
    <div >
        <div class="qrcode" ref="qrCodeUrl"></div>
    </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  export default {
    name: 'qrcode',
    props: {
      text: String,
      qrcodeSize:Number,
    },
    data() {
      return {

      }
    },
    watch: {
      "text": {
        handler(newValue, oldValue) {
          if(newValue)
          this.creatQrCode()
        },
      },
    },
    methods: {
      creatQrCode () {
        // 先清空原来的内容
        this.$refs.qrCodeUrl.innerHTML = "";
        new QRCode(this.$refs.qrCodeUrl, {
          text: this.text, // 需要转换为二维码的内容
          width: this.qrcodeSize,
          height: this.qrcodeSize,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: 3
        })
      }
    },
    mounted () {
      this.creatQrCode()
    }
  }
</script>

<style  type="scss">
    .qrcode{
        display: inline-block;
        padding: 5px;
        background-color: #fff;
    }


</style>
